<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Declarative Rendering</title>
        <script type="text/javascript" src="../../node_modules/vue/dist/vue.js"></script>
        <style>
            @media screen and (min-width: 960px) {
                body {
                    width: 960px;
                    margin: 0 auto;
                }
            }

            h6 {
                margin: 8px 0;
                padding-top: 3px;
                border-top: 2px solid #1a5ae4;
            }

            h6::after {
                content: ':';
            }

            code {
                font-family: 'Roboto Mono', Monaco, courier, monospace;
                color: #e96900;
                padding: 3px 5px;
                margin: 0 2px;
                border-radius: 2px;
                white-space: nowrap;
                font-size: 0.8em;
                background-color: #f8f8f8;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <h6>创建组件</h6>
            <my-component></my-component>
            <private-component></private-component>
        </div>
        <div id="app1">
            <my-component></my-component>
            <private-component></private-component>
        </div>
        <script type="text/javascript" src="component.js"></script>
    </body>
</html>